<script setup lang="ts">
import { CopyrightCircleOutlined } from '@ant-design/icons-vue'

defineProps<{
  copyright?: string
  icp?: string
}>()
</script>

<template>
  <div class="footer">
    <div v-if="$slots.renderFooterLinks" class="footer-links">
      <slot name="renderFooterLinks" />
    </div>
    <div class="footer-copyright">
      <a v-if="icp" href="https://beian.miit.gov.cn/" target="_blank">{{ icp }}</a> <CopyrightCircleOutlined /> {{ copyright }}
    </div>
  </div>
</template>

<style lang="scss">
.footer{
  // margin: 48px 0 24px;
  padding: 0 16px;
  text-align: center;

  &-links{
    margin-bottom: 8px;

    a{
      color: rgba(0,0,0,.45);
      transition: all .3s;
      margin-right: 40px;

      &:hover {
        color: rgba(0,0,0,.85);
      }
    }


    a:last-child{
      margin-right: 0;
    }
  }

  &-copyright{
    color: rgba(0,0,0,.45);
    font-size: 14px
  }
}


[data-theme='dark'] .footer{
  &-links{
    a{
      color:rgba(229, 224, 216, 0.45);

      &:hover{
        color: rgba(229, 224, 216, 0.85);
      }
    }
  }

  &-copyright{
    color: rgba(229, 224, 216, 0.45);
  }
}
</style>
